<template>
   <div class="order">
      <template>
         <el-table :data="orderData" style="width: 100%" border>
            <el-table-column prop="orderDetail" label="产品图片" align="center">
               <!-- 插槽作用域 -->
               <template v-slot="scope">
                  <el-avatar shape="square" :size=80 fit="scale-down" :src="scope.row.orderDetail[0].imageUrl"></el-avatar>
               </template>
            </el-table-column>
            <el-table-column prop="order_id" label="订单编号" align="center">
            </el-table-column>
            <el-table-column prop="orderDetail[0].productName" label="产品名称" align="center" width="80">
            </el-table-column>
            <el-table-column prop="orderDetail[0].quantity" label="数量" align="center" width="80">
            </el-table-column>
            <el-table-column prop="total_fee" label="总价格" align="center" width="80">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">
            </el-table-column>
            <el-table-column prop="pay_status" label="支付状态" align="center" width="80">
               <!-- 插槽作用域 -->
               <template v-slot="{row}">
                  {{row.pay_status===1?"已支付":"未支付"}}
               </template>
            </el-table-column>
            <el-table-column prop="order_status" label="订单状态" align="center" width="80">
               <!-- 插槽作用域 -->
               <template v-slot="{row}">
                  <span v-if="row.order_status===0">未提交</span>
                  <span v-else-if="row.order_status==1">提交成功</span>
						<span v-else-if="row.order_status==2">已经取消</span>
						<span v-else-if="row.order_status==3">无效订单</span>
						<span v-else-if="row.order_status==4">交易关闭</span>
						<span v-else-if="row.order_status==5">退货</span>
               </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" align="center" v-slot="{row}">
               <el-button type="primary" icon="iconfont icon-zhifubao" v-hasPay="[row.pay_status,row.order_status]">去支付</el-button>
               <el-button type="danger" icon="iconfont icon-shanchu">删除</el-button>
            </el-table-column>
         </el-table>
      </template>
   </div>
</template>
<script>
import {mapActions,mapState} from "vuex";
export default {
   directives:{
      hasPay:{
         inserted(el,binding){
            // console.log(binding);
            //指令接收的是用户的支付状态
            //pay_status状态：
            //0未支付 显示去支付按钮
            //1已支付 禁用去支付按钮
            //order_status状态：
            //0未提交 1已提交 2已经取消 3无效订单 4交易关闭 5退货
            //接收到的参数是一个数组[pay_status,order_status]
            let [pay_status,order_status] = binding.value
            //先保存当前按钮的类名
            let className = el.className
            if(pay_status!==0 || order_status!==1){
               el.disabled = true
               el.className = className + " " + "is-disabled"
            }

         }
      }

   },
   methods:{
      ...mapActions(["GET_ORDER_DATA"])
   },
   computed:{
      ...mapState(["orderData"])

   },
   created() {
      this.GET_ORDER_DATA()
      
   },
   data(){
      return{

      }
   },
}
</script>
<style scoped lang="less">
.order{
   padding-top:20px;
}
.el-avatar{
   /deep/ img{
      width:100%;
   }
}
</style>